<template lang="pug">
#about
    .banner
        img(src="../../images/about_banner.png", alt="")

    .layout-wrap
        .about-crumbs
            router-link(:to="{name: 'index'}") 首页
            |  - 新闻动态

        ul.news-list
            li(v-for="item in 5")
                .img
                    img(src="../../images/news2.jpg", alt="")
                .news-content
                    h3.news-title 老年人冬天怕冷怎么办？六种食物来暖身
                    .news-desc 寒冷的冬天已经到来，身为抵抗力较弱的老年朋友们就更加要做好御寒保暖的工作。所谓“穿衣吃饭”，除了要穿厚衣服保暖外，“吃饭”也是御寒保暖的重点。下面小编就为大家介绍几种适合老人的御寒食物。
                    .post-time
                        i.time
                        | 2018-10-11 10:04:33
            li
                .img
                    img(src="../../images/news3.jpg", alt="")
                .news-content
                    h3.news-title 刷牙时水里放一物，30年口臭全去光光！
                    .news-desc 实际上造成口臭的原因是多样的，每天刷牙解决的只是表面上的问题，我们肠胃上火也会导致口臭的现象。所以口臭也会从侧面反映出一个人肠胃的健康程度。要解决这个问题就要从问题的根源入手，那就是要解决肠胃上火的问题。
                    .post-time
                        i.time
                        | 2018-10-11 10:04:33

        paging

</template>

<script>

import paging from '../comps/paging';

export default {
    components: {
        paging,
    }
};
</script>

<style lang="postcss">
    @import 'css/about.css';

    .news-list{
        margin: 30px 0 90px;
        li{margin-bottom: 30px;
            position: relative;
            padding-left: 324px;
            height: 200px;
        }
        .img{position: absolute;
            left:0; top:0;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }
        .news-content{
            padding: 30px 0;
            line-height: 24px;
            color: #9B9B9B;
        }
        .news-title{
            height: 24px;
            font-size: 18px;
            @extend %YaHeiUI-bold;
            @extend %textoverflow;
            white-space: nowrap;
            margin-bottom: 16px;
            color: #000;
        }
        .news-desc{
            @extend %YaHeiUI;
            @extend %textoverflow;
            margin-bottom: 13px;
            max-height: 72px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
        }
        .post-time{
            font-size: 12px;
        }
        .time{float: left;
            width: 24px;
            height: 24px;
            margin-right: 6px;
            background: url('../../images/timer.png') no-repeat 50% 50%;
        }
    }
    .paging{margin-bottom: 70px;}
</style>
